<template>
  <div class="box">
    <van-search placeholder="请输入搜索关键词" shape="round" />

    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img :src="item.picUrl" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 标签 -->
    <van-tabs>
      <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
      </van-tab>
    </van-tabs>

    <!-- 商品列表 -->
    <div class="goods">
      <div
        class="goods_item"
        v-for="item in list"
        :key="item._id"
        @click="$router.push('/yd/deail?id=' + item._id)"
      >
        <img :src="item.pic" alt="" />
        <p class="title">{{ item.title }}</p>
        <div class="price">
          <p>￥{{ item.price }}</p>
          <p>
            <van-icon name="shopping-cart-o" size="18px"></van-icon>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      banner: {},
      list: {},
    };
  },
  mounted() {
    this.getBanner();
    this.getList();
  },
  methods: {
    getBanner() {
      this.$axios.get("https://api.it120.cc/small4/banner/list").then((res) => {
        console.log(res.data);
        this.banner = res.data;
      });
    },
    getList() {
      this.$axios.get("/json/list1.json").then((res) => {
        console.log(res);
        this.list = res.result;
      });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  img {
    width: 100%;
    height: 300px;
  }
}
.box {
  width: 100%;
  .goods {
    width: 100%;
    padding-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
    .goods_item {
      width: 48%;
      margin: 1%;
      border: 1px solid #ccc;
      padding: 5px;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 180px;
      }
      .price {
        display: flex;
        justify-content: space-between;
        p:nth-of-type(1) {
          color: red;
          font-weight: bold;
        }
      }
      .title {
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>